<template>
  <div class="w-full h-full overflow-y-auto border bg-opacity-60 p-4 rounded-md">
    <div class="mb-4">
      <div class="font-bold mb-4 flex justify-between items-center border-b relative">
        <div>播放音频</div>
        <div class="h-[38px] mb-[14px] flex">
          <v-switch v-model:model-value="isPlayAudio" @update:model-value="handleUpdateIsPlayAudio">
            <template #label>播放音频</template>
          </v-switch>
          <div v-if="loading" class="font-normal text-[8px] absolute left-0">音频加载中...</div>
        </div>
      </div>
      <div class="font-bold mb-4 flex justify-between items-center border-b">
        <data>投屏链接</data>
        <div class="h-[38px] mb-[14px] flex">
          <v-switch :model-value="isAutoOneLine" @update:model-value="handleUpdateIsAutoOneLine">
            <template #label>自动一行</template>
          </v-switch>
          <div class="w-[12px]"></div>
          <v-switch v-model:model-value="configDisabled">
            <template #label>配置锁</template>
          </v-switch>
        </div>
      </div>
      <div class="border-b pb-2">
        <a target="_blank" :href="screenSrc" class="text-sm mr-4">{{ screenSrc }}</a>
        <CopyTxet :text="screenSrc" />
      </div>
    </div>
    <div class="border-b pb-2 mb-4">
      <QuickOptions v-model="modelValue" @change="onChange" />
    </div>

    <div class="">
      <div class="font-bold mb-4 flex justify-between items-center">
        <div>字体大小</div>
        <div class="flex items-center w-[40px] justify-between">
          <div @click="handleUpdateFontSize(fontSize + 1)" v-ripple class="cursor-pointer">+</div>
          <div @click="handleUpdateFontSize(fontSize - 1)" v-ripple class="cursor-pointer">-</div>
        </div>
      </div>
      <div class="">
        <v-slider
          :disabled="configDisabled"
          thumb-label
          color="orange-lighten-2"
          :min="0"
          :max="100"
          :step="1"
          @update:model-value="handleUpdateFontSize"
          :model-value="fontSize"
        >
          <template #append>
            <span class="">{{ fontSize }}</span>
          </template>
        </v-slider>
      </div>
    </div>
    <div class="border-b mb-4">
      <div class="font-bold mb-4 flex justify-between items-center">
        行高

        <div class="flex items-center w-[40px] justify-between">
          <div @click="handleUpdateLineHeight(lineHeight + 1)" v-ripple class="cursor-pointer">+</div>
          <div @click="handleUpdateLineHeight(lineHeight - 1)" v-ripple class="cursor-pointer">-</div>
        </div>
      </div>
      <div class="">
        <v-slider
          :disabled="configDisabled"
          thumb-label
          color="orange-lighten-2"
          :min="12"
          :max="180"
          :step="1"
          @update:model-value="handleUpdateLineHeight"
          :model-value="lineHeight"
        >
          <template #append>
            <span class="">{{ lineHeight }}</span>
          </template>
        </v-slider>
      </div>
    </div>

    <div class="mb-4">
      <div class="font-bold mb-4">文字对齐方式</div>
      <div class="">
        <v-btn-toggle
          :model-value="textAlign"
          @update:model-value="handleUpdateTextAlign"
          color="orange-lighten-2"
          rounded="0"
          group
          variant="tonal"
        >
          <v-btn value="left"> 左 </v-btn>

          <v-btn value="center"> 中 </v-btn>

          <v-btn value="right"> 右 </v-btn>
        </v-btn-toggle>
      </div>
    </div>

    <div class="mb-4">
      <div class="font-bold mb-4">行数</div>
      <div class="">
        <v-btn-toggle
          :model-value="rows"
          @update:model-value="handleUpdateRows"
          color="orange-lighten-2"
          rounded="0"
          group
          variant="tonal"
        >
          <v-btn :value="3"> 3 </v-btn>
          <v-btn :value="4"> 4 </v-btn>
          <v-btn :value="6"> 6 </v-btn>
          <v-btn :value="8"> 8 </v-btn>
        </v-btn-toggle>
      </div>
    </div>

    <div class="flex gap-x-4">
      <div>
        <div class="font-bold mb-4">文字颜色</div>
        <div class="">
          <ColorPicker :model-value="fontColor" @update:model-value="handleUpdateFontColor"></ColorPicker>
        </div>
      </div>
      <div>
        <div class="font-bold mb-4">背景颜色</div>
        <div class="">
          <ColorPicker :model-value="bgColor" @update:model-value="handleUpdateBgColor"></ColorPicker>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useModel, watch, ref, inject, toRefs } from "vue";
import { useDebounceFn } from "@vueuse/core";
import ColorPicker from "@/components/ColorPicker.vue";
import QuickOptions from "./QuickOptions.vue";
import CopyTxet from "@/components/CopyTxet.vue";
import usePlayer from "@/views/TouYing/new/hooks/usePlayer";

const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  screenInfo: { type: Object, default: () => ({}) },
  screenSrc: { type: String, default: "" },
});

const emit = defineEmits(["update:modelValue", "change"]);
const onChange = useDebounceFn(() => emit("change"), 500);
const modelValue = useModel(props, "modelValue", emit);
const { togglePlay, loading } = usePlayer(modelValue, onChange);
const { fontSize, lineHeight, textAlign, fontColor, bgColor, rows, isAutoOneLine, isPlayAudio } = toRefs(
  modelValue.value
);
const configDisabled = ref(false);

function handleUpdateFontSize(value) {
  fontSize.value = value;
  onChange();
}
function handleUpdateLineHeight(value) {
  lineHeight.value = value;
  onChange();
}

function handleUpdateFontColor(value) {
  fontColor.value = value;
  onChange();
}

function handleUpdateTextAlign(value) {
  textAlign.value = value;
  onChange();
}

function handleUpdateBgColor(value) {
  bgColor.value = value;
  onChange();
}

function handleUpdateRows(value) {
  rows.value = value;
  onChange();
}

function handleUpdateIsAutoOneLine(value) {
  isAutoOneLine.value = value;
  onChange();
}

function handleUpdateIsPlayAudio(value) {
  togglePlay(value);
}
</script>
<style scoped></style>
